<template>
  <div style="display: flex;align-items: center;justify-content: center">
    <div class="box">
      <el-form label-position="right" label-width="150px"  class="demo-form-inline">
        <h1 style="text-align: center;margin-bottom: 20px">反馈页面</h1>
        <div>
          <el-form-item label="姓名:">
            <el-input v-model="name"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="性别:">
            <el-select v-model="sex">
              <el-option label="男"></el-option>
              <el-option label="女"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="年龄:">
            <el-input v-model="age"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="联系电话:">
            <el-input v-model="phone"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="联系单位:">
            <el-input v-model="unit"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="反馈意见/报错提交:">
            <el-input type="textarea" v-model="feedback"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;align-items: center;justify-content: center">
          <el-button type="primary" style="width: 120px">提交</el-button>
          <el-button type="warning" style="width: 120px">取消</el-button>
        </div>
      </el-form>
    </div>
</div>
</template>

<script>
export default {
  name:"feedback",
  data() {
    return {
        name: '',
        sex: '',
        age:'',
        phone:'',
        unit:'',
        feedback:''
      }
    }
  }

</script>

<style scoped>
.box{
  width: 80%;
  height: auto;
  box-shadow: 0 0 10px #ccc;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.el-form .el-select{
  width: 100%;
}
</style>